<template>
    <view class="record-list-item touch">
        <view class="record-header">
            <view class="title">{{ item.RelationName }}</view>
        </view>
        <view class="record-main">
            <view class="record-main-left">
                <image class="record-item-img" :src="easyGetImgUrl(item.ProductImage)"></image>
            </view>
            <view class="record-main-right">
                <view class="name">{{ item.ProductName }}</view>
                <template v-for="sku in item.SkuList">
                    <view class="no">货号:{{ sku.SkuCode }}</view>
                    <view class="spec">{{ sku.Attribute }}</view>
                    <template v-for="unit in sku.UnitList">
                        <view class="price-group">
                            <view class="price1">售 价：<text>¥{{ unit.BasePrice }}</text></view>
                            <view class="price2">客户价：<text v-if="unit.PriceList[0].Price">¥{{
                                unit.PriceList[0].Price }}</text><text v-else>¥0</text></view>
                        </view>
                    </template>
                </template>
            </view>
        </view>
    </view>
</template>

<script>
import easyTag from "@/components/easy/easy-tag.vue"
export default {
    components: {
        easyTag,
    },
    props: {
        item: {
            type: Object,
            default: () => { },
        },
    },
    data() {
        return {}
    },
    methods: {
        goDetail() {
            this.easyGoTo("/pages/order/detail?orderId=" + this.item.OrderId)
        },
        getTypeText() {
            let text = ""
            switch (this.item.ValetType) {
                case 1:
                    text = "代"
                    break
                default:
                    text = "订"
                    break
            }
            return text
        },
        getStateName() {
            let text = ""
            switch (this.item.StateName) {
                case "待发货":
                    text = "docred"
                    break
                case "待订单审核":
                    text = "docyellow"
                    break
                case "待确认收款":
                    text = "docyellow"
                    break
                case "已完成":
                    text = "docgreen"
                    break
                default:
                    text = "dot"
                    break
            }
            return text
        },
        getPayStatus() {
            let text = ""
            switch (this.item.PayStatusName) {
                case "部分付款":
                    text = "pay-state1"
                    break
                case "已付款":
                    text = "pay-state2"
                    break
                default:
                    text = ""
                    break
            }
            return text
        },
        getStateText() {
            let text = ""
            switch (this.item.Type) {
                case 4:
                    text = "待订单审核"
                    break
                default:
                    text = "订"
                    break
            }
            return text
        },
    },
}
</script>

<style lang="scss">
.record-list-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx $app-page-padding;
    background: $color-white;
    margin: $app-page-padding $app-page-padding 0;
    border-radius: 12rpx;

    .record-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: #F0F0F0 solid 1px;

        .title {
            font-size: $font-size-28;
            color: $color-gray-1;
            font-weight: bold;
        }
    }

    .record-main {
        display: flex;
        // justify-content: space-between;
        // align-items: center;
        padding-top: 20rpx;

        .record-main-left {
            margin-right: 20rpx;

            .record-item-img {
                width: 160rpx;
                height: 160rpx;
            }
        }

        .record-main-right {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .name {
                font-size: 28rpx;
                color: #333333;
            }

            .no {
                font-size: 28rpx;
                color: #999999;
            }

            .spec {
                font-size: 28rpx;
                color: #999999;
            }

            .price-group {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 10rpx;

                .price1 {
                    font-size: 28rpx;
                    color: #333333;
                    margin-right: 20rpx;

                    text {
                        font-weight: bold;
                        font-size: 32rpx;
                    }
                }

                .price2 {
                    font-size: 28rpx;
                    color: #333333;

                    text {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #F1270C;
                    }
                }
            }
        }
    }
}
</style>
